<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar :leftText="title" :autoBack="true"></u-navbar>
		</view>

		<view class="con-body" style="background-color: #FEFEFE;">
			<u-swiper :list="goodsDetail.banner" indicator height="700rpx"></u-swiper>

			<view>
				<u-cell-group>
					<u-cell :border="false">
						<view slot="title" style="color: #ff4500;">
							<text style="font-size: 40rpx;">￥</text>
							<text style="font-size: 60rpx; font-weight: 600;">{{ goodsDetail.price_selling }}</text>
							<text slot="label" style="font-size: 36rpx; color: #999999; margin-left: 20rpx; text-decoration: line-through;">￥{{ goodsDetail.price_market }}</text>
						</view>
						<view slot="value">
							<u-icon name="eye" color="#999" size="20" :label="'浏览 ' + goodsDetail.num_read" labelSize="24rpx" labelColor="#999"></u-icon>
							<u-icon name="bag" color="#fa8072" size="20" :label="'销量 ' + goodsDetail.stock_sales" labelSize="24rpx" labelColor="#fa8072"></u-icon>
						</view>
						<view slot="label">
							<text style="color:#ff4500; margin-left: 15rpx; font-size: 28rpx; padding: 0 8rpx; border-radius: 8rpx; background-color: #ffe4e1">
								{{ goodsDetail.discount }}
							</text>
						</view>
					</u-cell>
					<u-cell>
						<view slot="title">
							<text style="color: #000; font-weight: bold; font-size: 32rpx;">{{ goodsDetail.name }}</text>
						</view>
						<view slot="label">
							<view style="font-size: 28upx;display: flex;flex-wrap: wrap; color: currentColor;margin-top: 20rpx;">
								服务
								<text style="margin-left: 20rpx; font-weight: 400;color: #666;line-height: 45rpx;">{{ goodsDetail.marks }}</text>
							</view>
							<view style="font-size: 28upx;display: flex;flex-wrap: wrap; color: currentColor;margin-top: 20rpx; height: 60rpx;" @click="openSkuPopup()">
								<text style="float: left; line-height: 60rpx;">选择</text>
								<view style="float: left; width: 40rpx; height: 40rpx; margin-left: 20rpx;margin-right: 20rpx;">
									<u-image :showLoading="true" :src="goodsDetail.cover" width="60rpx" height="60rpx"></u-image>
								</view>
								<view style="float: left;margin-left: 10rpx;" v-for="(item, index) in goodsDetail.items">
									<u-image :showLoading="true" :src="item.goods_image" width="60rpx" height="60rpx"></u-image>
								</view>
							</view>
							<view style="font-size: 28upx;display: flex;flex-wrap: wrap; color: currentColor;margin-top: 15rpx; clear: both;">
								快递
								<text style="margin-left: 20rpx; font-weight: 400;color: #666;line-height: 45rpx;">{{ goodsDetail.truck }}</text>
							</view>
						</view>
					</u-cell>
				</u-cell-group>
				<view class="uni-flex-center">
					<view class="uni-cell-90" style="padding: 20rpx 20rpx 0rpx 20rpx;">
						<view class="title">
							全部评论({{ goodsDetail.comments_num }})
							<view style="color: #999999; font-weight: 400;font-size: 28rpx; float: right; padding-right: 20rpx;" @click="moreComment">更多</view>
						</view>
						<view v-if="goodsDetail.comments_num == 0" style="margin-top: 40rpx;">
							<u-empty mode="comment" icon="http://cdn.uviewui.com/uview/empty/comment.png"></u-empty>
						</view>
						<view v-else>
							<view v-for="(item, index) in goodsDetail.comments_label" style="display: flex; float: left; margin: 5rpx 10rpx;">
								<u-tag :text="item.name + ' ' + item.badge.value" :type="index == 1 ? 'error' : 'success'" shape="circle" plain></u-tag>
							</view>
							<view style="clear: both;"></view>
							<view class="album" v-for="(item, index) in goodsDetail.comments">
								<view class="album__avatar"><u-avatar :src="item.avatar" mode="circle"></u-avatar></view>

								<view class="album__content">
									<u-text :text="item.username" color="#3e3e3e" bold size="17"></u-text>
									<view class="u-line-1" style="margin-top: 8rpx;">
										<view style="display: inline-flex;">
											<u-rate count="5" v-model="item.rate" gutter="2" allowHalf activeColor="#E35719" inactiveColor="#E35719"></u-rate>
											<text style="color:#E35719; display: flex; margin-left: 15rpx;">{{ item.rate }}分</text>
										</view>
									</view>

									<view style="color: #333333;font-size: 30rpx;margin-left: 10rpx; margin-top: 10rpx;">{{ item.content }}</view>
									<view style="margin-top: 20rpx; margin-bottom: 10rpx;"><u-album :urls="item.images" multipleSize="70" space="4"></u-album></view>
									<view>
										<text style="color: #fff; background-color: #32cd32; font-size: 22rpx;padding: 2rpx 6rpx; border-radius: 6rpx;">{{ item.label }}</text>
									</view>
									<view>
										<text style="color: #666666; font-size: 26rpx; float: left;">{{ item.time }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="uni-flex-center">
					<view class="uni-cell-90">
						<u-cell
							:icon="goodsDetail.shop.avatar"
							:iconStyle="{ width: '100rpx', height: '100rpx', borderRadius: '10rpx', marginRight: '20rpx' }"
							:label="'销量：' + goodsDetail.shop.sales + '  好评：' + goodsDetail.shop.good"
						>
							<view slot="title">
								{{ goodsDetail.shop.nickname }}
								<text
									v-if="goodsDetail.shop.type == 1"
									style="background-color: #f5deb3; color: #8b4513; font-size: 22rpx; padding: 2rpx 4rpx; border-radius: 6rpx; margin-left: 10rpx;"
								>
									会员
								</text>
								<text
									v-if="goodsDetail.shop.type == 2"
									style="background-color: #f5deb3; color: #8b4513; font-size: 22rpx; padding: 2rpx 4rpx; border-radius: 6rpx; margin-left: 10rpx;"
								>
									旗舰店
								</text>
							</view>
							<view slot="value" style="border: #999 1rpx solid; padding: 6rpx 12rpx; border-radius: 12rpx; font-size: 24rpx;" @click="shopDetail(goodsDetail.sid)">
								进店逛逛
							</view>
						</u-cell>

						<u-grid>
							<u-grid-item v-for="(item, index) in goodsDetail.shop.goods">
								<view style="width: 96%; height: 320rpx;" @click="goodDetail(item.id, item.sid)">
									<u-image :src="item.cover" mode="scaleToFill" width="100%" height="240rpx"></u-image>
									<view class="u-line-1" style="font-size: 26rpx;">{{ item.name }}</view>
									<view class="u-line-1" style="font-size: 28rpx; color: crimson;">
										￥{{ item.price_selling }}
										<text style="float: right; color: #999; font-size: 22rpx;">已售{{ item.stock_sales }}件</text>
									</view>
								</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
				<!-- 详情 -->
				<view class="description">
					<view class="titile u-flex">
						<image src="/static/icon/titile_left.png"></image>
						<text>商品详情</text>
						<image src="/static/icon/titile_right.png"></image>
					</view>
					<view class="content"><rich-text :nodes="goodsDetail.content"></rich-text></view>
				</view>
			</view>
		</view>
		<vk-data-goods-sku-popup
			ref="skuPopup"
			v-model="skuKey"
			border-radius="20"
			:localdata="goodsInfo"
			:mode="skuMode"
			@open="onOpenSkuPopup"
			@close="SkuPopup"
			@add-cart="addCart"
			@buy-now="buyNow"
		></vk-data-goods-sku-popup>
		<u-toast ref="uToast" />
		<view class="navigation">
			<view class="left">
				<!-- <view class="item">
					<u-icon name="home" size="30"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view> -->
				<!-- <view class="item">
					<u-icon name="heart" size="30"></u-icon>
					<view class="text u-line-1">收藏</view>
				</view> -->
				<view class="item car" @click="tocart">
					<u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" size="30"></u-icon>
					<view class="text u-line-1">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="openSkuPopup()">加入购物车</view>
				<view class="buy btn u-line-1" @click="openSkuPopup()">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getGoodDetail, addCart, createOrder } from '@/service/shopservice.js';
export default {
	data() {
		return {
			title: '商品详情',
			gid: 0,
			sid: 0,
			goodsDetail: {},
			// 是否打开SKU弹窗
			skuKey: false,
			// SKU弹窗模式
			skuMode: 1,
			// 后端返回的商品信息
			goodsInfo: {}
		};
	},
	onLoad(options) {
		this.gid = options.gid;
		this.sid = options.sid;
		getGoodDetail({
			gid: this.gid
		}).then(this.getGoodDetail);
	},
	methods: {
		getGoodDetail(e) {
			if (e.code == 200) {
				this.goodsDetail = e.result;
				this.goodsInfo = e.result.goodInfo;
			}
		},
		goodDetail(id, sid) {
			this.$u.route({
				url: '/pagesShop/nav/good-detail',
				params: {
					gid: id,
					sid: sid
				}
			});
		},
		tocart() {
			uni.redirectTo({
				url: '/pagesShop/index/index?cut=' + 2
			});
		},
		shopDetail(sid) {
			this.$u.route({
				url: '/pagesShop/nav/shop',
				params: {
					sid: sid
				}
			});
		},
		// 获取商品信息，并打开sku弹出
		openSkuPopup() {
			this.skuKey = true;
		},
		// sku组件 开始-----------------------------------------------------------
		onOpenSkuPopup() {
			// console.log('监听 - 打开sku组件');
		},
		SkuPopup() {
			// console.log('监听 - 关闭sku组件');
		},
		// 加入购物车前的判断
		addCartFn(obj) {
			let { selectShop } = obj;
			this.skuKey = false;
			let cart = {};
			cart = {
				sku: obj.selectShop._id,
				num: obj.selectShop.buy_num,
				code: obj.selectShop.goods_id
			};
			addCart(cart).then(res => {
				if (res.code == 200) {
					this.toast(res.msg);
				} else {
					this.toast(res.msg);
				}
			});
		},
		addOrderFn(obj) {
			let { selectShop } = obj;
			this.skuKey = false;
			let cart = [];
			cart = [
				{
					sku: obj.selectShop._id,
					num: obj.selectShop.buy_num,
					code: obj.selectShop.goods_id
				}
			];
			createOrder({ goods: cart }).then(res => {
				this.toast(res.msg);
				if (res.code == 200) {
					this.$u.route({
						url: '/pagesShop/order/orderConfirm',
						params: {
							order_no: res.result
						}
					});
				}
			});
		},
		// 加入购物车按钮
		addCart(selectShop) {
			this.addCartFn({
				selectShop: selectShop,
				success: function(res) {
					// 实际业务时,请替换自己的立即购买逻辑
					// console.log(res);
				}
			});
		},
		// 立即购买
		buyNow(selectShop) {
			// console.log('监听 - 立即购买');
			this.addOrderFn({
				selectShop: selectShop,
				success: function(res) {
					// 实际业务时,请替换自己的立即购买逻辑
					console.log(res);
				}
			});
		},
		toast(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss">
.navigation {
	display: flex;
	width: 100%;
	justify-content: space-between;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0 24rpx 0;
	text-align: center;
	position: fixed;
	bottom: 0rpx;

	.left {
		display: flex;
		font-size: 20rpx;
		padding: 0 30rpx;
		.item {
			margin: 0 30rpx;

			&.car {
				text-align: center;
				position: relative;

				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}

	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		padding-right: 20rpx;
		.btn {
			line-height: 66rpx;
			padding: 0 60rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}

		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}

		.buy {
			background-color: #ff7900;
		}
	}
}

.album {
	@include flex;
	padding: 10rpx 0rpx;
	margin-top: 1px;
	align-items: flex-start;
	background-color: #ffffff;
	border-radius: 10rpx;
	border-bottom: 1rpx solid #e1e1e1;

	&__avatar {
		padding: 5rpx;
		border-radius: 3rpx;
	}

	&__content {
		margin-left: 20rpx;
		flex: 1;
	}
}

.description {
	padding: 0rpx 20rpx 130rpx 20rpx;

	.title {
		width: 100%;
		height: 80upx;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		font-size: 26upx;
		color: #999;
	}
}

.titile {
	justify-content: space-between;
	margin: 20rpx 0;
	padding: 0 264rpx;
	color: #333;
	font-size: 28rpx;
	font-weight: bold;

	image {
		width: 36rpx;
		height: 24rpx;
	}
}
</style>
